<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加问卷题目</title>
    <!-- icon小图标 -->
	<link rel="icon" href="../statics/images/icon_S_Bar_Contact.png" type="image/x-icon">
	<!-- Animate.css -->
	<link rel="stylesheet" href="/statics/css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="/statics/css/icomoon.css">
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
	<!-- Magnific Popup -->
	<link rel="stylesheet" href="/statics/css/magnific-popup.css">
	<!-- Flexslider  -->
	<link rel="stylesheet" href="/statics/css/flexslider.css">
	<!-- Theme style  -->
	<link rel="stylesheet" href="/statics/css/style.css">
	<!-- Modernizr JS -->
	<script src="/statics/js/modernizr-2.6.2.min.js"></script>
    <!-- layui -->
    <link rel="stylesheet" href="/statics/layui/css/layui.css">
    <style>
        .layui-layout-admin .layui-logo {
            left: 2rem;
            text-align: left;
            color: #fff;
        }

        #card-show a:hover {
            background-color: yellow;
            bottom: 2rem;
        }
    </style>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onkeydown="on_return();">
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航栏 -->        
        <nav class="fh5co-nav" role="navigation">
            <div class="container-wrap">
                <div class="top-menu">
                    <div class="row">
                        <div class="col-xs-2">
                            <div id="fh5co-logo"><img src="/statics/images/Gologo.png" alt="" width="180" height="40"></div>
                        </div>
                        <div class="col-xs-10 text-right menu-1">
                            <ul class="lisa_green">
                                <li class="active"><a href="/">首页</a></li>
                                <li><a href="/work">个人主页</a></li>
                                <li class="has-dropdown">
                                    <a href="#">admin</a>
                                    <ul class="dropdown">
                                        <li><a href="/about_bz">帮助中心</a></li>
                                        <li><a href="/work-single">账户信息</a></li>
                                        <li><a href="#" data-toggle="modal" data-target="#closeAccount">退出登录</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </nav>

        <!--右侧主体内容区-->
        <!-- <div class="layui-body" style="left: 0rem;margin-top: 1rem;"> -->
        <div class="layui-container">
            <!-- <div class="layui-container">  -->
            <div class="layui-row" style="background-color: azure;">
                <div class="layui-col-md1 layui-col-xs1 layui-col-sm1">
                    &nbsp;
                </div>
                <div class="layui-col-md10 layui-col-xs10 layui-col-sm10">
                    <form class="layui-form" action="" id="content">
                        <div id="problem">
                            {% for count in counts %}
                            {% if (count.countType==1)%}
                            <div class="layui-form-item" style="margin-top: 0.2rem;">
                                <label class="layui-form-label">填分题：</label>
                                <div class="layui-input-block" id="form{count.id}">
                                    <input type="text" name="adq{{count.id}}" required lay-verify="required"
                                        placeholder="请输入问题" autocomplete="off" value="{{count.countContent}}"
                                        class="layui-input">
                                    {% if(count.optTypes==1) %}
                                    <input type="text" name="ops{{count.optId}}" required lay-verify="required"
                                        placeholder="分值" autocomplete="off" value="{{count.optContents}}"
                                        class="layui-input">
                                    {% endif %}
                                </div>
                                <label class="layui-form-label"></label>
                                <!-- <button type="button" id="ado{{count.id}}"
                                    class="layui-btn layui-btn-primary layui-border-green "
                                    onclick="addOptions('{{count.id}}','{{count.countType}}')"
                                    style="margin-top:0.5rem"><img src="../imgs/添加.png"
                                        style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;">
                                    设置分值</button> -->
                            </div>
                            {% elseif(count.countType==2) %}
                            <div class="layui-form-item">
                                <label class="layui-form-label">选分题：</label>
                                <div class="layui-input-block" id="form{{count.id}}">
                                    <input type="text" name="adq{{count.id}}" required lay-verify="required"
                                        placeholder="请输入问题" autocomplete="off" value="{{count.countContent}}"
                                        class="layui-input">
                                    <select name="ops{{count.id}}" lay-verify="required" id="sco{{count.id}}">
                                        {% if(count.optTypes==2) %}
                                        {% for i in range(0,count.optContents) %}
                                        <option value="{{i}}">{{i}}分</option>
                                        {% endfor %}
                                        <option value="{{count.optContents}}">{{count.optContents}}分</option>
                                        {% endif %}
                                    </select>
                                </div>
                                <label class="layui-form-label"></label>
                            </div>
                            {% endif %}
                            {% endfor %}

                        </div>

                        {% if(counts[0].id===undefined) %}
                        <div id="submitForm" class="layui-hide">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" id="sub" lay-submit lay-filter="formDemo">提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                        {% else %}
                        <div id="submitForm">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </form>

                    <!-- 添加的问题类型 -->
                    <div id="add" class="layui-col-md12 layui-col-xs12 layui-col-sm12">
                        <p class="layui-col-md12 layui-col-xs12 layui-col-sm12" style="margin-bottom: 1rem;margin-top: 0.5rem;">请选择你要添加的题型：</p>
                        <br>
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-border-green layui-col-md2 layui-col-xs6 layui-col-sm3"
                            onclick="addWrite()"><img src="/statics/images/填空题.png" width="20" height="20"
                                style="margin-bottom: 0.1rem;"> 填分题</button>
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-border-green layui-col-md2 layui-col-xs6 layui-col-sm3"
                            onclick="addScore()"><img src="/statics/images/打分题.png" width="20" height="20"
                                style="margin-bottom: 0.1rem;"> 选分题</button>
                    </div>
                    <!-- 底部留空 -->
                    <div style="margin-bottom: 3rem;">
                        <p>&nbsp;</p>
                    </div>



                </div>
                <div class="layui-col-md1 layui-col-xs1 layui-col-sm1">
                    &nbsp;
                </div>
            </div>
            <!-- </div> -->



        </div>


        <div class="layui-footer" style="left: 0rem;">
            <!-- 底部固定区域 -->
            © Questionnaire survey system
        </div>
    </div>

       <!-- layui -->
    <script src="/statics/static/layui/layui.js"></script>
    <!-- axios -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
	<!-- ribbon 背景特效 -->
	<script async type="text/javascript" size="90" alpha="0.2" zIndex="0" src="/statics/js/wall_paper/ribbon.js"></script>
	<!-- jQuery -->
	<script src='https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js'></script>
	<!-- jQuery Easing -->
	<script src="/statics/js/jquery.easing.1.3.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
	<!-- Waypoints -->
	<script src="/statics/js/jquery.waypoints.min.js"></script>
	<!-- Flexslider -->
	<script src="/statics/js/jquery.flexslider-min.js"></script>
	<!-- Magnific Popup -->
	<script src="/statics/js/jquery.magnific-popup.min.js"></script>
	<script src="/statics/js/magnific-popup-options.js"></script>
	<!-- Counters -->
	<script src="/statics/js/jquery.countTo.js"></script>
	<!-- Main -->
	<script src="/statics/js/main.js"></script>
    <script>
        // 注销
        // function logout() {
        //     layer.open({
        //         title: "注销",
        //         content: "是否退出当前用户？", //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        //         btn: ['注销', '取消']
        //         , yes: function (index, layero) {
        //             axios({
        //                 method: 'post',
        //                 url: '/logout'
        //             }).then(function (response) {
        //                 // axios工具下，服务器真正返回的数据在返回对象的data中
        //                 let res = response.data;
        //                 if (res.code === 200) {
        //                     window.location.href = '/login';
        //                 }
        //             })
        //         }
        //         , btn2: function (index, layero) {
        //             //按钮【按钮二】的回调

        //             // return false //开启该代码可禁止点击该按钮关闭
        //         }
        //     })
        // }

        // 提交失败
        layui.use(["form", "layer"], function () {
            var form = layui.form;
            var layer = layui.layer;

            form.on('submit', function (data) {
                var id = Number(location.search.substring(4));
                axios({
                    method: "post",
                    url: "/countSubmit",
                    data: {
                        subForm: data.field,
                        id: id
                    }
                }).then(function (res) {
                    res = res.data;
                    let code = res.code;
                    if (code === 200) {
                        // window.location.href="/countShow?id="+id;
                        window.location.href = "/addSubmitOk?id=" + id;

                    } else {
                        console.log("提交失败");
                    }
                })

                return false;
            });
        })

        // 添加选项
        function addOptions(id, type) {
            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                // 按钮弹出框
                layer.prompt({
                    formType: 0,
                    value: '',
                    title: '请输入分值',
                    // area: ['800px', '350px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    if (!isNaN(value)) {
                        axios({
                            method: "post",
                            url: "/addOptions",
                            data: {
                                value: value,
                                id: id,
                                type: type
                            }
                        }).then(function (res) {
                            res = res.data;
                            let data = JSON.parse(res.data)
                            let opstype = Number(data.optionType);
                            if (opstype === 1) {
                                let html = `
                                <input type="text" name="ops${data.id}" required lay-verify="required" placeholder="分值"
                                    autocomplete="off" value="${data.optionContent}" class="layui-input">
                                `
                                $("#form" + data.fromQuestionId).append(html);

                                $('#ado' + data.fromQuestionId).remove();
                                form.render();
                            } else if (opstype === 2) {
                                $("#sco" + data.fromQuestionId).attr(`name`, `ops${data.id}`);

                                for (i = 0; i <= value; i++) {
                                    if (i < value) {

                                        html = `
                                            <option value="${i}" disabled>${i}分</option>
                                        `
                                        $("#sco" + data.fromQuestionId).append(html);
                                    } else if (i = value) {
                                        html = `
                                            <option value="${i}">${i}分</option>
                                        `
                                        $("#sco" + data.fromQuestionId).append(html);
                                        $('#ado' + data.fromQuestionId).remove();
                                    }

                                }

                                form.render();
                            }
                            else {
                                console.log("添加选项失败");
                            }

                        })
                        layer.close(index);
                    } else {
                        layer.msg('只能输入数字类型', function () {
                            // 提示后操作
                        });
                    }
                });
                form.render();//关键代码
            });
        }
        // 添加填分题目
        function addWrite() {
            var id = Number(location.search.substring(4));
            axios({
                method: "post",
                url: "/addScoreProblems",
                data: {
                    id: id
                }
            }).then(function (res) {
                res = res.data;
                let data = JSON.parse(res.data);

                let html = `
                <div class="layui-form-item">
                    <label class="layui-form-label">填分题：</label>
                    <div class="layui-input-block" id="form${data.id}">
                        <input type="text" name="adq${data.id}" required lay-verify="required" placeholder="请输入问题"
                            autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label"></label>
                    <button type="button" id="ado${data.id}" class="layui-btn layui-btn-primary layui-border-green "
                        onclick="addOptions(${data.id},${data.countType})" style="margin-top:0.5rem"><img src="/statics/images/添加.png"
                        width="20" height="20" style="margin-bottom: 0.1rem;"> 设置分值</button>
                </div>
                `
                $("#problem").append(html);
                $("#submitForm").removeClass("layui-hide");
                layui.use(['form', 'layer'], function () {
                    var form = layui.form, layer = layui.layer;
                    form.render();//关键代码
                });
            })
        }


        // 添加选分题目
        function addScore() {
            var id = Number(location.search.substring(4));
            axios({
                method: "post",
                url: "/addSelectScore",
                data: {
                    id: id
                }
            }).then(function (res) {
                res = res.data;
                let data = JSON.parse(res.data);

                let html = `
                <div class="layui-form-item">
                    <label class="layui-form-label">选分题：</label>
                    <div class="layui-input-block" id="form${data.id}">
                        <input type="text" name="adq${data.id}" required lay-verify="required" placeholder="请输入问题"
                            autocomplete="off" class="layui-input">
                        <select name="ops${data.id}" lay-verify="required" id="sco${data.id}">

                        </select>
                    </div>
                    <label class="layui-form-label"></label>
                    <button type="button" id="ado${data.id}" class="layui-btn layui-btn-primary layui-border-green "
                        onclick="addOptions(${data.id},${data.countType})" style="margin-top:0.5rem"><img src="/statics/images/添加.png"
                        width="20" height="20" style="margin-bottom: 0.1rem;"> 设置分值</button>
                </div>
                `
                $("#problem").append(html);
                $("#submitForm").removeClass("layui-hide");
                layui.use(['form', 'layer'], function () {
                    var form = layui.form, layer = layui.layer;
                    form.render();//关键代码
                });
            })
        }

         //回车时，默认是登陆
         function on_return() {
            if (window.event.keyCode == 13) {
                if (document.all('sub') != null) {
                    document.all('sub').click();
                }
            }
        }
    </script>
    <!-- 结束代码 -->
</body>

</html>